<template>
  <div class="hm-widget-text" :style="size">
    <div class="hwt-cont">
      <hm-title class="hwt-title" :trig="flag" :text="title" v-if="title" />
      <hm-title
        class="hwt-summary"
        :trig="flag"
        :text="summary"
        v-if="summary"
      />
    </div>
  </div>
</template>

<script scoped>
import TitleText from "@/components/titleText.vue";
/**
 * wcms2.0坑位图
 * 资产名称位于图片下方
 * 坑位尺寸只需传内容尺寸不包含边框尺寸
 */
export default {
  name: "hm-widget-text",
  components: {
    [TitleText.name]: TitleText,
  },
  props: {
    info: Object, // 坑位数据内容
    size: {
      // 坑位尺寸
      type: Object,
      default: () => ({
        width: "175px",
        height: "80px",
        lineHeight: "80px",
      }),
    },
    title: {
      // 标题
      type: String,
      default: "",
    },
    summary: {
      // 描述
      type: String,
      default: "",
    },
    flag: {
      type: Boolean,
      default: false,
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~@/assets/scss/variables";
.hm-widget-text {
  cursor: pointer;
  position: relative;
  border: $hm-border;
  border-radius: 4px;
  line-height: 100%;
  background-color: #3d4e60;
  background-clip: content-box;
  margin-bottom: 24px;
  &.focushover {
    z-index: 2;
    border: $hm-border-h;
    box-shadow: $hm-shadow-h;
  }
  .hwt-cont {
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    height: auto;
    .hwt-title {
      width: 100%;
      height: 30px;
      overflow: hidden;
      font-size: 26px;
      line-height: 30px;
    }
    .hwt-summary {
      width: 100%;
      height: 30px;
      overflow: hidden;
      font-size: 18px;
      line-height: 30px;
    }
  }
}
</style>
